<template>
  <div class="home">
    <div class="title">
      <span>todos</span>
    </div>
    <div class="todos">
      <div class="todos-title">
        <input class="allcheck" type="checkbox" @click="allCheck" :checked="allChecked">
        <input v-model="inputValue" @keyup.enter="addTodos" class="input-todos" type="text" placeholder="按回车键添加事件">
      </div>
      <div class="todos-list">
        <div class="todos-item" v-for="(item,index) in showTodos" :key="item.id">
          <input class="item-check" type="checkbox" v-model:checked="item.status">
          <div class="item-box" @dblclick.capture="editItem($event,index)">
            <span v-if="edititem!=index" class="item-text" >{{item.text}}</span>
            <input v-else class="text-change" type="text" @blur="turnTo" v-model="item.text" >
          </div>
          <span @click="deleteItem(index)" class="item-delete">删除</span>
        </div>
      </div>
      <div class="todos-bottom">
        <div class="todos-com">
          <span class="com1">已完成</span>
          <span>{{done}}</span>
          <span class="com-line">/</span>
          <span>{{total}}</span>
        </div>
        <div class="todos-dis">
          <span @click.stop="showItem('all')">全部</span>
          <span @click.stop="showItem('doing')">进行中</span>
          <span @click.stop="showItem('done')">已完成</span>
        </div>
        <div class="todos-clear">
          <span @click="deleteDone">删除已完成</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  data(){
    return {
      edititem:-1,
      inputValue:'',
      todos:[],
      showing:'all',
    }
  },
  computed:{
    allChecked(){
      if(this.todos.length===0){
        return false;
      }
      let flag=true;
      this.todos.map((v)=>{
        if(!v.status) flag=false;
      })
      return flag;
    },
    done(){
      let count=0;
      this.todos.map((v)=>{
        if(!!v.status) count++;
      })
      return count;
    },
    total(){
      return this.todos.length;
    },
    showTodos(){
      if(this.showing==='all'){
        return this.todos;
      }else if(this.showing==='doing'){
        return this.todos.filter((v)=>{
          return !v.status;
        })
      }else if(this.showing==='done'){
        return this.todos.filter((v)=>{
          return !!v.status;
        })
      }
    }
  },
  watch:{
    todos:{
      handler(newTodos){
        localStorage.setItem('todos',JSON.stringify(newTodos));
      },
      deep:true,
    }
  },
  methods:{
    deleteDone(){
      let doingItem=this.todos.filter((v)=>{
        return !v.status;
      })
      this.todos=doingItem;
    },
    addTodos:function(){
      if (!this.inputValue) {
        this.$message({
          message: "输入不能为空！",
          type: "warning",
        });
        return false;
      }
      this.todos.push({
        text: this.inputValue,
        status: false,
        id: Date.now(),
      });
      this.inputValue='';
    },
    allCheck(){
      let allC=!this.allChecked;
      let newTodos=JSON.parse(JSON.stringify(this.todos));
      newTodos.map((v)=>{
        v.status=allC;
      });
      this.todos=newTodos;
    },
    deleteItem(i){
      this.todos.splice(i,1);
    },
    editItem(e,i){
      this.edititem=i;
      let p=e.target.parentElement;
      setTimeout(function () {
        p.lastChild.focus()
      },10)
    },
    turnTo(){
      this.edititem=-1;
    },
    showItem(val){
      this.showing=val;
    }
  },
  mounted() {
    this.todos=JSON.parse(localStorage.getItem('todos') || '[]');
  }
}
</script>
<style lang="less" scoped>
.title{
  width: 500px;
  height: 150px;
  text-align: center;
  margin: 100px auto 0;
  span{
    line-height: 100px;
    font-size: 50px;
    color: coral;
  }
}
  .todos{
    width: 500px;
    margin: 0 auto;
    .todos-title{
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .allcheck{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-left: 20px;
      }
      .input-todos{
        width: 400px;
        height: 30px;
        text-indent: 20px;
        margin-right: 20px;
      }
    }
    .todos-list{
      .todos-item{
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .item-check{
          width: 30px;
          height: 30px;
          margin-left: 20px;
        }
        .item-box{
          margin-right: 20px;
          .item-text{
            display: block;
            width: 400px;
            height: 30px;
            line-height: 30px;
          }
          .text-change{
            width: 400px;
            height: 30px;
            text-indent: 20px;
          }
        }
        .item-delete{
          position: absolute;
          width: 80px;
          height: 30px;
          background: red;
          color: aliceblue;
          line-height: 30px;
          text-align: center;
          display: none;
          right: 0;
        }
      }
      .todos-item:hover{
        .item-delete{
          display: block;
        }
      }
    }
    .todos-bottom{
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .todos-com{
        .com1{
          margin-right: 10px;
        }
        .com-line{
          margin: 0 10px;
        }
      }
      .todos-dis{
        span{
          margin: 0 10px;
        }
      }
      .todos-clear{

      }
    }
  }
</style>
